<template>
  <el-dialog
    v-model="viewValue"
    :title="!showCustomHeader ? title : undefined"
    :width="modalWidth"
    :modal="modal"
    :fullscreen="isFullscreen"
    :draggable="draggable"
    :show-close="!showCustomHeader"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :destroy-on-close="destroyOnClose"
    :class="className"
    v-bind="$attrs"
  >
    <template #header v-if="showCustomHeader">
      <div class="zz-Dialog-header">
        <span class="zz-Dialog-title">{{ title }}</span>
        <div class="zz-Dialog-actions">
          <el-icon
            v-if="fullscreen"
            @click="toggleFullscreen"
            class="zz-Dialog-action-btn"
            :title="isFullscreen ? '退出全屏' : '全屏'"
          >
            <FullScreen v-if="!isFullscreen" />
            <Aim v-else />
          </el-icon>
          <el-icon
            @click="handleClose"
            class="zz-Dialog-action-btn zz-Dialog-close-btn"
            title="关闭"
          >
            <Close />
          </el-icon>
        </div>
      </div>
    </template>
    <div class="zz-Dialog-body" :class="{ 'has-progress': percent > 0 }">
      <slot></slot>
    </div>
    <div class="zz-Dialog-progress" v-if="percent > 0">
      <el-progress
        :percentage="percent"
        :stroke-width="progressStrokeWidth"
        :show-text="showProgressText"
        :status="progressStatus"
      />
    </div>
    <template #footer v-if="showFooter">
      <div class="zz-Dialog-footer">
        <div class="zz-Dialog-footer-left">
          <slot name="footer-left"></slot>
        </div>
        <div class="zz-Dialog-footer-right">
          <el-button
            :size="buttonSize"
            @click="handleCancel"
            :loading="cancelLoading"
            :disabled="cancelDisabled"
            v-if="showCancelButton"
          >
            {{ cancelButtonText }}
          </el-button>
          <el-button
            type="primary"
            :size="buttonSize"
            :loading="confirmLoading"
            :disabled="confirmDisabled"
            @click="handleConfirm"
            v-if="showConfirmButton"
          >
            {{ confirmButtonText }}
          </el-button>
          <slot name="footer-right"></slot>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import { FullScreen, Aim, Close } from "@element-plus/icons-vue";

const props = defineProps({
  // 基础属性
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  size: {
    type: String,
    default: "medium",
    validator: (value) =>
      ["small", "medium", "large", "extra-large"].includes(value),
  },
  className: {
    type: String,
    default: "zz-Dialog",
  },

  // 弹窗行为配置
  modal: {
    type: Boolean,
    default: true,
  },
  draggable: {
    type: Boolean,
    default: false,
  },
  closeOnClickModal: {
    type: Boolean,
    default: true,
  },
  closeOnPressEscape: {
    type: Boolean,
    default: true,
  },
  destroyOnClose: {
    type: Boolean,
    default: false,
  },

  // 头部配置
  showCustomHeader: {
    type: Boolean,
    default: true,
  },
  fullscreen: {
    type: Boolean,
    default: true,
  },

  // 底部配置
  showFooter: {
    type: Boolean,
    default: true,
  },
  showCancelButton: {
    type: Boolean,
    default: true,
  },
  showConfirmButton: {
    type: Boolean,
    default: true,
  },
  cancelButtonText: {
    type: String,
    default: "取消",
  },
  confirmButtonText: {
    type: String,
    default: "确认",
  },
  buttonSize: {
    type: String,
    default: "default",
    validator: (value) => ["large", "default", "small"].includes(value),
  },

  // 加载状态
  cancelLoading: {
    type: Boolean,
    default: false,
  },
  confirmLoading: {
    type: Boolean,
    default: false,
  },
  cancelDisabled: {
    type: Boolean,
    default: false,
  },
  confirmDisabled: {
    type: Boolean,
    default: false,
  },

  // 进度条配置
  percent: {
    type: Number,
    default: 0,
    validator: (value) => value >= 0 && value <= 100,
  },
  progressStrokeWidth: {
    type: Number,
    default: 6,
  },
  showProgressText: {
    type: Boolean,
    default: false,
  },
  progressStatus: {
    type: String,
    default: "",
    validator: (value) =>
      ["", "success", "exception", "warning"].includes(value),
  },

  // 兼容旧版本的属性
  loading: {
    type: Boolean,
    default: false,
  },
  saveName: {
    type: String,
    default: "",
  },
  closeName: {
    type: String,
    default: "",
  },
  defaultButton: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits([
  "update:modelValue",
  "confirm",
  "cancel",
  "close",
  "open",
  "opened",
  "closed",
  // 兼容旧版本
  "ok",
]);

const viewValue = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
    // todo: el-dialog 组件自身会发 open close 事件
    if (value) {
      emit("open");
    } else {
      emit("close");
    }
  },
});

// 设置窗口宽度
const modalWidth = computed(() => {
  switch (props.size) {
    case "extra-large":
      return "1200px";
    case "large":
      return "900px";
    case "medium":
      return "650px";
    case "small":
      return "480px";
    default:
      return "650px";
  }
});

// 兼容旧版本的按钮文本
const cancelButtonText = computed(() => {
  return props.closeName || props.cancelButtonText;
});

const confirmButtonText = computed(() => {
  return props.saveName || props.confirmButtonText;
});

// 兼容旧版本的加载状态
const cancelLoading = computed(() => {
  return props.loading || props.cancelLoading;
});

const confirmLoading = computed(() => {
  return props.loading || props.confirmLoading;
});

// 兼容旧版本的按钮显示
const showCancelButton = computed(() => {
  return props.defaultButton && props.showCancelButton;
});

const showConfirmButton = computed(() => {
  return props.defaultButton && props.showConfirmButton;
});

// 全屏状态管理
const isFullscreen = ref(false);

// 切换全屏
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value;
};

// 关闭弹窗
const handleClose = () => {
  viewValue.value = false;
  isFullscreen.value = false;
};

// 取消操作
const handleCancel = () => {
  emit("cancel");
  // 如果没有阻止默认行为，则关闭弹窗
  handleClose();
};

// 确认操作
const handleConfirm = () => {
  emit("confirm");
  // 兼容旧版本
  emit("ok");
};

// 兼容旧版本的方法
const cancel = () => {
  handleCancel();
};

const ok = () => {
  handleConfirm();
};

// 暴露方法给父组件
defineExpose({
  close: handleClose,
  toggleFullscreen,
  // 兼容旧版本
  cancel,
  ok,
});
</script>

<style lang="less" scoped>
// 弹窗头部样式
.zz-Dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;

  .zz-Dialog-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--el-text-color-primary);
    line-height: 24px;
  }

  .zz-Dialog-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    .zz-Dialog-action-btn {
      width: 20px;
      height: 20px;
      cursor: pointer;
      color: var(--el-text-color-regular);
      transition: color 0.3s;

      &:hover {
        color: var(--el-color-primary);
      }

      &.zz-Dialog-close-btn:hover {
        color: var(--el-color-danger);
      }
    }
  }
}

// 弹窗内容区域
.zz-Dialog-body {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;

  &.has-progress {
    max-height: calc(70vh - 40px);
  }

  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: var(--el-fill-color-lighter);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--el-border-color-darker);
    border-radius: 3px;

    &:hover {
      background: var(--el-text-color-disabled);
    }
  }
}

// 进度条样式
.zz-Dialog-progress {
  margin-top: 16px;
  padding: 0 4px;
}

// 弹窗底部样式
.zz-Dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;

  .zz-Dialog-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .zz-Dialog-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

// 全局弹窗样式覆盖
:global(.zz-Dialog) {
  .el-dialog__header {
    padding: 20px 20px 10px;
    // margin-right: 0;
  }

  .el-dialog__body {
    padding: 10px 20px;
  }

  .el-dialog__footer {
    padding: 10px 20px 20px;
  }

  // 响应式设计
  @media (max-width: 768px) {
    width: 90% !important;
    margin: 0 auto;

    .el-dialog__header {
      padding: 15px 15px 8px;
    }

    .el-dialog__body {
      padding: 8px 15px;
    }

    .el-dialog__footer {
      padding: 8px 15px 15px;
    }
  }
}
</style>
